import styled from 'styled-components';
import React, { CSSProperties, ReactNode, useState } from 'react';
import { Modal, Divider } from 'antd';
import {
    SaveOutlined, AppstoreOutlined, MailOutlined, BuildOutlined, CodeOutlined,
    SisternodeOutlined, TableOutlined, ApartmentOutlined, ConsoleSqlOutlined, SettingOutlined,
    ExceptionOutlined, ClusterOutlined, ExportOutlined, UploadOutlined, DownloadOutlined
} from '@ant-design/icons';

import { Button } from '../button';

export interface ToolsHeaderItem {
    label?: string;
    key: string;
    icon?: ReactNode;
    divider?: boolean;
    disabled?: boolean;
    isAction?: boolean;
}

export interface ToolsHeaderDivider {
    divider: boolean;
}


export interface ToolsHeaderProps {
    style?: CSSProperties;
    leftItems?: Array<ToolsHeaderItem | ToolsHeaderDivider>;
    centerItems?: Array<ToolsHeaderItem | ToolsHeaderDivider>;
    rightItems?: Array<ToolsHeaderItem | ToolsHeaderDivider>;
    activeKey: string;
    onChange: (key: string, isAction?: boolean) => Promise<void>
}

export const ToolsHeader: React.FC<ToolsHeaderProps> = (props) => {

    return (
        <Container data-tauri-drag-region style={props.style}>
            <LeftContainer>
                {
                    props.leftItems && props.leftItems.map((item: any, index) => {
                        if (item.divider) {
                            return (
                                <Divider key={'leftItems_' + index} type={'vertical'} style={{ height: '35px' }} />
                            );
                        }
                        return (
                            <Button
                                key={'leftItems_' + index}
                                width={40}
                                icon={item.icon ? item.icon : <UploadOutlined />}
                                title={item.label}
                                active={props.activeKey === item.key}
                                disabled={item.disabled}
                                onClick={async () => {
                                    //弹出对话框
                                    await props.onChange(item.key, item.isAction);
                                }}>
                            </Button>
                        );
                    })
                }
            </LeftContainer>
            <CenterContainer data-tauri-drag-region>
                {
                    props.centerItems && props.centerItems.map((item: any, index) => {
                        if (item.divider) {
                            return (
                                <Divider key={'centerItems_' + index} type={'vertical'} style={{ height: '35px' }} />
                            );
                        }
                        return (
                            <Button
                                key={'centerItems_' + index}
                                width={40}
                                icon={item.icon ? item.icon : <UploadOutlined />}
                                title={item.label}
                                active={props.activeKey === item.key}
                                disabled={item.disabled}
                                onClick={async () => {
                                    //弹出对话框
                                    await props.onChange(item.key, item.isAction);
                                }}>
                            </Button>
                        );
                    })
                }
            </CenterContainer>
            <RightContainer data-tauri-drag-region>
                {
                    props.rightItems && props.rightItems.map((item: any, index) => {
                        if (item.divider) {
                            return (
                                <Divider key={'rightItems_' + index} type={'vertical'} style={{ height: '35px' }} />
                            );
                        }
                        return (
                            <Button
                                key={'rightItems_' + index}
                                width={40}
                                icon={item.icon ? item.icon : <UploadOutlined />}
                                title={item.label}
                                active={props.activeKey === item.key}
                                disabled={item.disabled}
                                onClick={async () => {
                                    //弹出对话框
                                    await props.onChange(item.key, item.isAction);
                                }}>
                            </Button>
                        );
                    })
                }
            </RightContainer>
        </Container>
    );
}

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
`;

const LeftContainer = styled.div`
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
`;

const CenterContainer = styled.div`
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
`;

const RightContainer = styled.div`
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
`;

const Group = styled.div`
    padding: 0 0px;
`;